<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,user-scale=1.0" name="viewport">
    <title>Dream</title>
    <link href="../img/doraemon.ico" rel="icon">
    <link href="../out/bootstrap4/css/bootstrap.min.css" rel="stylesheet">
    <link href="../out/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/normal.css" rel="stylesheet">
    <link href="../css/header.css" rel="stylesheet">
    <link href="../css/special.css" rel="stylesheet">
    <script src="../out/bootstrap4/js/jquery-3.6.1.min.js"></script>
    <script src="../out/bootstrap4/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<header>
    <div class="myNav container-fluid">
        <div class="row">
            <div class="col-12">
                <nav class="navbar navbar-expand-sm navbar-dark">
                    <!-- Brand -->
                    <a class="navbar-brand d-flex" href="../index.html"><img alt="img" src="../img/doraemon_logo.png"
                                                                             style="width: 3rem"><span
                            style="font-family: '方正少儿_GBK',serif;color: white;font-size: 2rem;">哆啦A梦</span></a>

                    <!-- Toggler/collapsibe Button -->
                    <button class="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse"
                            type="button">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- Navbar links -->
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav w-100 justify-content-center align-items-end align-items-sm-center">
                            <li class="nav-item">
                                <a class="nav-link p-1" href="../index.html">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1" href="recommend.html">推荐</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 active " href="special.html">专题</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="film.html">剧场版</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link p-1 " href="play.html">视频</a>
                            </li>
                            <li class="nav-item">
                                <a class="d-block d-sm-none border login p-1 rounded nav-link"
                                   href="login.html">注册/登录</a>
                            </li>
                        </ul>
                    </div>
                    <a class="d-none d-sm-block border p-1 rounded nav-link login" href="login.html">注册/登录</a>
                </nav>
            </div>
        </div>
    </div>
</header>
<div class="mySlide container-fluid">
    <div class="row">
        <div class="col-12 p-0 m-0">
            <img class="w-100" src="../img/doraemo_bg_1.jpg">
        </div>
    </div>
</div>
<!--content-->
<div class="myContent container" style="z-index: 10">
    <div class="row p-5">
        <div class="col-12 justify-content-center d-flex"><span class="font-weight-bold">主要角色</span></div>
        <div class="mt-2 mb-4 col-12 justify-content-center d-flex"><span
                class="font-weight-bold text-primary">——</span></div>
        <div class="col-12">
            <!--角色-->
            <div class="pt-3 pb-3 row border-bottom align-items-center">
                <div class="col-xl-4 offset-xl-0 col-lg-3 offset-lg-1 col-md-4 col-12 photoCol">
                    <div class=" personPhoto" style="">
                        <img class="img-fluid" src="../img/person/dx.png">
                    </div>
                </div>
                <div class="col-xl-8 offset-xl-0 col-lg-7 offset-lg-1 col-md-7 offset-md-1 col-12">
                    <h5 class="font-weight-bold personName">野比大雄</h5>
                    <p>
                        野比大雄，简称大雄，是日本漫画家藤子·F·不二雄创作的科幻喜剧漫画《哆啦A梦》中的男主角。大雄性子懦弱，胆小怕事，丢三落四。优点是有责任心，善良正直。是一个“为别人的不幸而伤心，会祈求别人幸福的人”。哆啦A梦即是由野比大雄的玄孙野比世修派来帮助他、挖掘他的潜质，扭转他不幸的命运的。</p>
                </div>
            </div>
            <div class="pt-3 pb-3 row border-bottom align-items-center">
                <div class="col-xl-4 offset-xl-0 col-lg-3 offset-lg-1 col-md-4 col-12 photoCol">
                    <div class=" personPhoto" style="">
                        <img class="img-fluid" src="../img/person/jx.png">
                    </div>
                </div>
                <div class="col-xl-8 offset-xl-0 col-lg-7 offset-lg-1 col-md-7 offset-md-1 col-12">
                    <h5 class="font-weight-bold personName">源静香</h5>
                    <p>
                        温柔善良、乐于伸出援手。她很关切像大雄这样弱小的人、被虐待的小动物和被遗弃的娃娃等。相对而言，她不看好骨川小夫和刚田武等恶霸。
                        会弹乐器。主攻钢琴，但也喜欢小提琴，只不过根本不会拉 堪比胖虎唱歌的杀人音波，并在多年后将某光坂高中天才少女附体，有时候在窗边拉小提琴吵到邻居、惹妈妈生气。
                    </p>
                </div>
            </div>
            <div class="pt-3 pb-3 row border-bottom align-items-center">
                <div class="col-xl-4 offset-xl-0 col-lg-3 offset-lg-1 col-md-4 col-12 photoCol">
                    <div class=" personPhoto" style="">
                        <img class="img-fluid" src="../img/person/dream.png">
                    </div>
                </div>
                <div class="col-xl-8 offset-xl-0 col-lg-7 offset-lg-1 col-md-7 offset-md-1 col-12">
                    <h5 class="font-weight-bold personName">哆啦A梦</h5>
                    <p>
                        名字的意思是铜锣卫门。心肠好，乐于助人，做事很拼命，但却心肠软。每次大雄遇到困难，他总会帮大雄。但有时会用愚蠢的方法来帮助大雄。当它吃不到铜锣烧或人们叫他狸猫时，脾气会非常暴躁。
                    </p>
                </div>
            </div>
            <div class="pt-3 pb-3 row border-bottom align-items-center">
                <div class="col-xl-4 offset-xl-0 col-lg-3 offset-lg-1 col-md-4 col-12 photoCol">
                    <div class=" personPhoto" style="">
                        <img class="img-fluid" src="../img/person/ph.png">
                    </div>
                </div>
                <div class="col-xl-8 offset-xl-0 col-lg-7 offset-lg-1 col-md-7 offset-md-1 col-12">
                    <h5 class="font-weight-bold personName">刚田武</h5>
                    <p>
                        中文又译胖虎、技安。是日本动画及漫画《哆啦A梦》中一位重要的角色，设定在1964年6月15日出生。
                        刚田武在漫画中是所有孩子们里体型最胖最高的，个性粗暴，容易冲动，什么事都想着用武力解决。经常借别人的东西不还。
                    </p>
                </div>
            </div>
            <div class="pt-3 pb-3 row border-bottom align-items-center">
                <div class="col-xl-4 offset-xl-0 col-lg-3 offset-lg-1 col-md-4 col-12 photoCol">
                    <div class=" personPhoto" style="">
                        <img class="img-fluid" src="../img/person/xf.png">
                    </div>
                </div>
                <div class="col-xl-8 offset-xl-0 col-lg-7 offset-lg-1 col-md-7 offset-md-1 col-12">
                    <h5 class="font-weight-bold personName">骨川小夫</h5>
                    <p>
                        家境富裕，性格自大、骄傲、爱炫耀；很有艺术才能。常与胖虎一起欺负大雄。但有时也会站在大雄这一边。小夫在大长篇里表现出了勇敢和机智。虽然有种种缺点，但是仍然非常珍惜与大雄他们之间的友情，虽然不讨人喜欢，但是他也在改变自己。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="m-0 p-0">
    <div class="container-fluid bg-dark p-3">
        <div class="row">
            <div class="col-12 col-lg-4 offset-lg-0 col-md-5 offset-md-0 col-sm-5 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-start">
                <img alt="..."
                     src="../img/doraemon_logo.png"
                     style="width: 2rem">
                <span style="font-family: '方正少儿_GBK',serif;color: white;font-size: 1.5rem;">哆啦A梦</span>
            </div>
            <div class="col-12 col-lg-4 offset-lg-4 col-md-5 offset-md-2 col-sm-7 offset-sm-0 d-flex align-items-center justify-content-center justify-content-sm-end">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-twitter bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-weibo bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-wechat bg-light p-2 rounded-circle text-dark"
                                                        style="font-size: 1.5rem"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
<script src="../js/normal.js"></script>
</body>
</html>